<template>
<div>
  <el-card style="margin-left:15px;margin-bottom: 15px;margin-right: 10px ">
    <div>
      <el-breadcrumb
        separator-class="el-icon-arrow-left"
        style="margin-right: 30px;position:absolute;right:0;ub:main-center cross-center"
      >
        <el-breadcrumb-item :to="{ path: '/' }">调度管理</el-breadcrumb-item>
        <el-breadcrumb-item>调度中心</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div style="margin-top: 15px;margin-left: 15px;height: 40px;width:550px" >
      <el-input placeholder="请输入内容" v-model="input" class="input-with-select">
        <el-select v-model="select" slot="prepend" placeholder="请选择" style="width: 150px">
          <el-option label="订单id" value="订单id"></el-option>
          <el-option label="订单类型" value="订单类型"></el-option>
          <el-option label="订单状态" value="订单状态"></el-option>
          <el-option label="客户姓名" value="客户姓名"></el-option>
<!--          <el-option label="收货人" value="收货人"></el-option>-->
          <el-option label="电话" value="电话"></el-option>
          <el-option label="要求完成时间" value="要求完成时间"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search" @click="query_Click()"></el-button>
      </el-input>
    </div>

    <div style="margin-top: 15px;margin-left: 15px;margin-right: 20px;width:100%;">
      <template>
        <el-table
          :data="tableData.slice((pageInfo.curPage-1)*pageInfo.pageSize,
        pageInfo.curPage*pageInfo.pageSize)"
          style="width: 100%"
          height="450">
          <el-table-column
            fixed
            prop="id"
            label="订单id"
            width="120">
          </el-table-column>
          <el-table-column
            prop="orderType"
            label="订单类型"
            width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.orderType===0">普通配送订单</span>
              <span v-if="scope.row.orderType===1">退订单</span>
              <span v-if="scope.row.orderType===2">换货单</span>
              <span v-if="scope.row.orderType===3">退货单</span>
            </template>
          </el-table-column>

          <el-table-column
            prop="orderStatus"
            label="订单状态"
            width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.orderStatus===0">可分配</span>
              <span v-if="scope.row.orderStatus===1">缺货</span>
              <span v-if="scope.row.orderStatus===2">调度中</span>
              <span v-if="scope.row.orderStatus===3">已领货</span>
              <span v-if="scope.row.orderStatus===4">配送完成</span>
              <span v-if="scope.row.orderStatus===5">已退货</span>
            </template>
          </el-table-column>


          <el-table-column
            prop="name"
            label="客户姓名"
            width="120">
          </el-table-column>

          <el-table-column
            prop="receiver"
            label="收货人"
            width="120">
          </el-table-column>

          <el-table-column
            prop="remark"
            label="标记"
            width="120">
          </el-table-column>

          <el-table-column
          prop="phone"
          label="电话"
          width="120">
          </el-table-column>

          <el-table-column
            prop="deliveryInformation"
            label="送货信息"
            width="120">
          </el-table-column>
          <el-table-column
            prop="finishDate"
            label="要求完成日期"
            width="120"
          >

          </el-table-column>

          <el-table-column
            fixed="right"
            label="操作"
            width="250">
            <template slot-scope="scope">
                <el-button type="primary" @click="editClick(scope.row)" style="font-size: 15px" :disabled="scope.row.orderStatus!==1">分配货物</el-button>
                <el-button type="danger" @click="allInformationClick(scope.row)">查看</el-button>
            </template>
          </el-table-column>

        </el-table>
      </template>
    </div>

    <div class="block" style="margin-top: 10px;margin-left: 15px;">
      <!--    <span class="demonstration">完整功能</span>-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.curPage"
        :page-sizes="[4,8,10,20]"
        :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      >
      </el-pagination>
    </div>
  </el-card>

<!--打开对话框查看调度信息详细信息-->
  <el-dialog title="调度订单详细信息" :visible.sync="dialogFormVisibleAll"  width="75%">
    <el-form  style="height:100%" label-position="right" label-width="150px">
<!--      内容左主题区域-->
      <div  style="width:50%;float:left;">
        <el-form-item label="订单id:" >
          <el-input v-model="allForm.id" disabled ></el-input>
<!--          {{allForm.id}}-->
        </el-form-item>
        <el-form-item label="客户编号:" >
          <el-input v-model="allForm.clientId" disabled></el-input>
        </el-form-item>
        <el-form-item label="收货人:" >
        <el-input v-model="allForm.receiver" disabled></el-input>
        </el-form-item>

        <el-form-item label="收获地址:" >
          <el-input v-model="allForm.shippingAddress" disabled></el-input>
        </el-form-item>
        <el-form-item label="收货人电话:" >
          <el-input v-model="allForm.consigneephone" disabled></el-input>
        </el-form-item>
        <el-form-item label="投递信息:" >
          <el-input v-model="allForm.deliveryInformation" disabled></el-input>
        </el-form-item>

      </div>
<!--      -->
      <div  style="width:48%;float:right;">
        <el-form-item label="订单类型:" >
          <el-input v-model="allForm.orderType" disabled></el-input>
        </el-form-item>
        <el-form-item label="要求完成日期:" >
          <el-input v-model="allForm.finishDate" disabled></el-input>
        </el-form-item>
        <el-form-item label="订单状态:" >
        <el-input v-model="allForm.orderStatus" disabled></el-input>
        </el-form-item>
        <el-form-item label="资金信息:" >
          <el-input v-model="allForm.fundingInformation" disabled></el-input>
        </el-form-item>
        <el-form-item label="备注信息:" >
          <el-input v-model="allForm.remark" disabled></el-input>
        </el-form-item>
        <el-form-item label="订单总金额:" >
          <el-input v-model="allForm.theTotalAmountOfOrders" disabled></el-input>
        </el-form-item>
<!--        <el-form-item label="商品列表:" >-->
<!--          <el-input v-model="allForm.commodityList" disabled></el-input>-->
<!--        </el-form-item>-->
      </div>
      <el-form-item label="商品列表:">
        <el-table
          :data="allForm.commodityList"
          style="width: 100%"
          height="450">
          <el-table-column
            fixed
            prop="id"
            label="商品id"
            width="120">
          </el-table-column>
          <el-table-column
            prop="amount"
            label="数量"
            width="120">
          </el-table-column>

          <el-table-column
            prop="costPrice"
            label="价格"
            width="120">
          </el-table-column>

          <el-table-column
            prop="createTime"
            label="开始时间"
            width="120">
          </el-table-column>

          <el-table-column
            prop="discount"
            label="折扣"
            width="120">
          </el-table-column>

          <el-table-column
            prop="firstClassification"
            label="一级分类"
            width="120">
          </el-table-column>

          <el-table-column
            prop="inventory"
            label="库存量"
            width="120">
          </el-table-column>

          <el-table-column
            prop="isExchange"
            label="可否换货"
            width="120">
          </el-table-column>
          <el-table-column
            prop="isReturn"
            label="可否退货"
            width="120"
          >
          </el-table-column>

          <el-table-column
            prop="model"
            label="型号"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="productDesccription"
            label="商品说明"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="productName"
            label="商品名称"
            width="120"
          >
          </el-table-column>

          <el-table-column
            prop="remark"
            label="备注"
            width="120"
          >
          </el-table-column>

          <el-table-column
            prop="secondClassification"
            label="二级分类"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="shelfLife"
            label="保质期限"
            width="120"
          >
          </el-table-column>

          <el-table-column
            prop="supplier"
            label="供应商"
            width="120">
          </el-table-column>

          <el-table-column
            prop="unitPrice"
            label="单价"
            width="120"
          >
          </el-table-column>

          <el-table-column
            prop="unitofmeasurement"
            label="计量单位"
            width="120"
          >
          </el-table-column>

          <el-table-column
            prop="updateTime"
            label="更新时间"
            width="120"
          >
          </el-table-column>

          <el-table-column
            fixed="right"
            prop="vendor"
            label="厂商"
            width="120"
          >
          </el-table-column>
          <!--            secondClassification shelfLife supplier unitPrice unitofmeasurement updateTime vendor-->

        </el-table>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer" style="width:100%;float: none">
      <el-button @click="dialogFormVisibleAll = false">取 消</el-button>
      <el-button type="primary" @click="dialogFormVisibleAll = false">确 定</el-button>
    </div>
  </el-dialog>
</div>

</template>

<script>

export default {

  data() {
    return {
      tableData: [],
      //分页
      pageInfo:{
        curPage: 1,
        pageSize: 4,
      },
      total:0,

      //搜索框相关变量
      input: '',
      select: '',

      //修改订单信息相关变量
      // dialogFormVisibleEdit: false,
      editForm: {
        orderId:'',
        status :'',
        },

      formLabelWidth: '120px',
      formLittleWidth:'60px',

      //查看详细订单对话框
      dialogFormVisibleAll:false,
      allForm: [
        {
          id: '',
          clientId: '',
          receiver: '',
          shippingAddress: '',
          consigneephone: '',
          deliveryInformation: '',
          theTotalAmountOfOrders: '',
          orderType: '',
          finishDate: '',
          orderStatus: '',
          fundingInformation: '',
          remark: '',
          commodityList: []
        },
      ],

      queryInfo: {
        createTime:'',
        finishTime:'',
        queryContain:'',
        queryType:''
      },

      //生成任务单的接口属性参数
      taskListInfo:{
        // userId:0,//配送员
        orderId:0,//配送员送哪个订单，类型为integer
        // serviceMoney:0.0,//配送员服务费
        // remark:'null',//备注随意
      },
      isDisabledFn:false
    }
  },
  methods:
    {

    //得到所有信息表格
    async getMessage()
    {
      // let url='/api/dispatching_management/query_all_order/'
      let url='/api/dispatching_management/query_all_order'
      console.log('得到消息')
      const{data:res}=await this.$http.get(url)
      if(res.code!==200)
      {
        console.log('连接失败')
        console.log('getMessage',res.msg)
        // return this.$message.error(res.msg)
      }
      else if(res.code==200)
      {
        this.tableData = res.data
        this.pageInfo.pageSize=res.pageSize
        this.total=res.total
        console.log('数据');
        console.log(res.data);
        this.total=res.data.length
        console.log('数据更新成功')
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageInfo.pageSize=val
    },
    handleCurrentChange(val) {
      this.pageInfo.curPage=val
      console.log(`当前页: ${val}`);
    },
    //查询搜索框
    async query_Click() {
      console.log('查询');
      console.log('this.input:'+this.input);
      console.log('this.select:'+this.select);
      if(this.input=='')
      {
        return this.$message.error('请输入相关查询数据内容')
      }
      if(this.select=='')
      {
        return this.$message.error('请选择查询类型')
      }
      else if((this.select!==''||this.select!==null)&&(this.input!==''||this.input!==null))
      {
        switch (this.select)
        {
          case "订单id":
              //执行查询id的代码块
              this.query_id()
            break;
          case "订单类型":
              this.query_orderType()
              break;
          case "订单状态":
              this.query_orderType()
              break;
          case "客户姓名":
              this.query_orderType()
              break;
          case "电话":
              this.query_orderType()
              break;
          case "要求完成时间":
            this.query_orderType()
            break;
          default:
            break;

        }
      }

    },
      //根据id查询
    async query_id(){
      // let url="/api/dispatching_management/queryDispat_by_id/"
      const{data:res}=await this.$http.get(`/api/dispatching_management/queryDispat_by_id/${this.input}`).catch(err=>{
        this.$message.error('对不起，服务器异常或没有权限！请多试几次')
        console.log(err.message)
      })
      if(res.code==200)
      {
        this.$message.success(res.msg)
        console.log(res.msg)
        console.log(res.data)
        this.tableData=res.data
      }
      else if(res.code!==200)
      {
        this.$message.error(res.msg)
      }
    },
    //根据订单类型()
    async query_orderType()
    {
      let url='/api/dispatching_management/query_order_on_require'
      if((this.select=='订单类型' || this.select=='订单状态' || this.select=='电话' )&& !Number(Number(this.input)))
      {
        this.$message.error(this.select+'只能输入数字')
      }
      else if (this.select=='要求完成时间' && this.isNotDate())
      {
        this.$message('请输入正确的时间格式')
      }
      else
      {
        this.queryInfo.queryContain=this.input
        this.queryInfo.queryType=this.select
        const{data:res}=await this.$http.post(url,this.queryInfo).catch(err=>{
          this.$message.error("对不起，服务器异常或没有权限！请多试几次！")
          console.log(err.msg)
        })
        if(res.code==200)
        {
          console.log('查询结果')
          // this.$message.success(res.msg)
          console.log(res.msg)
          console.log(res.data)
          this.tableData=res.data
        }
        else if(res.code!=200)
        {
          // this.$message.error(res.msg+'更新错误')
          this.$message.error('更新错误')

        }
      }
    },
      isNotDate() {
        let timeRegex = "^((([0-9]{3}[1-9]|[0-9]{2}[1-9][0-9]{1}|[0-9]{1}[1-9][0-9]{2}|[1-9][0-9]{3})-" +
          "(((0[13578]|1[02])-(0[1-9]|[12][0-9]|3[01]))|((0[469]|11)-(0[1-9]|[12][0-9]|30))|(02-(0[1-9]|[1][0-9]|2[0-8]))))|((([0-9]{2})" +
          "(0[48]|[2468][048]|[13579][26])|((0[48]|[2468][048]|[3579][26])00))-02-29))\\s+" +
          "([0-1]?[0-9]|2[0-3]):([0-5][0-9]):([0-5][0-9])$"
        let Regex = new RegExp(timeRegex)
        if (!Regex.test(this.input))
        {
          return true
        }
        else
          {
          return false
        }

      },
    //编辑状态
    async editClick(row){
      // console.log('初始化编辑状态');
      // console.log(row.orderStatus);
      // console.log(row.id)
      this.editForm.orderId=row.id
      //可分配(0)、缺货（1）  //根据订单id更新订单状态
      let url='/api/dispatching_management/updateOrder/'
      const {data:res} =await this.$http.get(`${url}${this.editForm.orderId}/${0}`).catch(err=>{
        this.$message.error('对不起，服务器异常或没有权限！请多试几次')
        console.log('错误信息')
        console.log(err.msg)})
      if(res.code==200)
      {
        // this.$message.success(res.msg)
        console.log('editClick',res.msg)
        console.log('editClick成功')
        this.$message.success('分配货物成功')
        //利用接口把最新的状态信息传出去
        // this.updateOrder(row.orderId,0)
        // 在这里调用生成任务订单
        this.createTaskList()
        ////最后再更新数据，就是重新请求数据
        this.getMessage()
      }
      else if(res.code!==200)
      {
        // this.$message.error(res.msg)
        console.log(res.msg)
        this.$message.success('分配货物失败' + res.msg)

      }
    },
      //用生成任务订单
    async createTaskList()
    {
        let url='/api/dispatching_management/generatorMissionList/'
        console.log('生成任务订单')
        this.taskListInfo.orderId=this.editForm.orderId
        console.log('taskListInfo.orderId',this.taskListInfo.orderId)
        const{data:res}=await this.$http.get(`${url}${this.taskListInfo.orderId}`)
          .catch(err=>{
            console.log(err.msg)
            this.$message.error('对不起，服务器没有权限！请多试几次！')
          })
        if(res.code==200)
        {
          // this.$message.success(res.msg)
          console.log(res.msg)
          console.log('生成任务订单成功')
        }
        else if (res.code!=200)
        {
          // this.$message.error(res.msg)
          console.log('生成任务订单失败'+res.msg)
        }
      },
      //获取全部详细信息
      async allInformationClick(row)
      {
        let url='/api/dispatching_management/query_detail_order_by_id/'
          //+row.id
        console.log('查看全部信息');

        console.log(row.id);

        //根据查询到id返回一个原本详细的信息
        const{data:res}=await this.$http.get(`${url}${row.id}`).catch(err=>{
          this.$message.error('对不起，服务器异常或没有权限！请多试几次')
          console.log('错误信息');
          // console.log(res.msg)
          console.log(err);
        })

        if(res.code==200)
        {
          // this.$message.success(res.msg)
          console.log(res.msg)
          this.dialogFormVisibleAll=true
          //出错：
          // this.allForm=res.data
          console.log(res)
          console.log(res.data)
          console.log(res.data[0].id)
          console.log(res.data.clientId)
          // this.form
          this.allForm.id=res.data[0].id
          this.allForm.clientId=res.data[0].clientId
          this.allForm.consigneephone=res.data[0].consigneephone
          this.allForm.deliveryInformation=res.data[0].deliveryInformation
          this.allForm.finishDate=res.data[0].finishDate
          this.allForm.fundingInformation=res.data[0].fundingInformation
          this.allForm.orderStatus=res.data[0].orderStatus
          this.allForm.orderType=res.data[0].orderType
          this.allForm.receiver=res.data[0].receiver
          this.allForm.remark=res.data[0].remark
          this.allForm.shippingAddress=res.data[0].shippingAddress
          this.allForm.theTotalAmountOfOrders=res.data[0].theTotalAmountOfOrders
          this.allForm.commodityList=res.data[0].commodityList

        }
        else if (res.code!=200)
        {
          this.$message.error(res.msg)
          console.log(res.msg)
        }
      },
      //更新信息
    //   async updateOrder(orderId,orderStatus)
    //   {
    //     let url = '/api/dispatching_management/updateOrder/'
    //     const {data:res}=await this.$http.get(`${url}${orderId}/${orderStatus}`).catch(
    //       err=>{
    //         this.$message.error('数据更新失败，服务器更新失败')
    //         console.log(err.msg)
    //       }
    //     )
    //     if (res.code==200)
    //     {
    //       console.log('updateOrder更新成功')
    //       // this.$message.success(res.msg)
    //       console.log(res.msg)
    //     }
    //     else if (res.code!==200)
    //     {
    //       console.log('updateOrder更新失败')
    //       // this.$message.error(res.msg)
    //     }
    //
    // },
  },
    //查看全部信息
  //用来初始化界面的数据
  created()
  {
    this.getMessage()
  }

};
</script>

<style scoped>
  .el-select .el-input {
    width: 80px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
  .dialog-left{

  }
  .dialog-right{

  }
</style>
